<template>
  <h3>事件传参数</h3>
  <div @click="clickName(item)" v-for="(item, index) of names" :key="index">
    <button>{{ item }}</button>
  </div>
  <p>这里通过for循环遍历生成多个按钮,同时把不同按钮的值传递给点击按钮的方法,实现不同的按钮传不同的值</p>

  <h4>事件传参数事件</h4>
  <div @click="withEventClickName(item, $event)" v-for="(item,index) of names" :key="index">
    <button>{{ item}}</button>
  </div>
  <p>这里点击按钮可以带上当前参数,也可以带上事件参数</p>
</template>
<script>
export default {
  // 这里要实现给遍历循环的数据批量加点击事件,让每个点击事件都可以显示当前点击的数据
  data() {
    return {
      names: ["张三","李四","王五"]
    }
  },methods:{
    clickName(e) {
      console.log("点击了按钮", e)
    },
    // 带事件的点击按钮动作
    withEventClickName(item, e) {
      console.log("点击了按钮",  item)
      console.log("按钮事件", e.target)
    }
  }
}
</script>